<template>
  <div class="app-container">
    <el-form
      ref="form"
      :model="options"
      label-width="80px"
      label-position="top"
    >
      <div v-for="(item, objkey) in options" :key="path + '.' + objkey">
        <el-form-item :label="item.label">
          <!-- 基本内容填写 -->
          <el-input
            type="text"
            size="mini"
            v-if="
              item.type == 'string' &&
                setDefaultValue(values, objkey, item.type)
            "
            v-model="values[objkey]"
          ></el-input>
          <el-input
            type="textarea"
            size="mini"
            v-if="
              item.type == 'text' && setDefaultValue(values, objkey, item.type)
            "
            v-model="values[objkey]"
          ></el-input>
          <el-input
            type="number"
            size="mini"
            v-if="
              item.type == 'number' &&
                setDefaultValue(values, objkey, item.type)
            "
            v-model="values[objkey]"
          ></el-input>

          <template
            v-if="
              item.type == 'radio' &&
                setDefaultValue(values, objkey, item.type, item.selections)
            "
          >
            <el-radio-group v-model="values[objkey]">
              <el-radio
                :label="radioItem.value"
                v-for="(radioItem, radioIndex) in item.selections"
                :key="path + '.' + objkey + '.' + radioIndex"
                >{{ radioItem.name }}</el-radio
              >
            </el-radio-group>
          </template>

          <template
            v-if="
              item.type == 'ddl' &&
                setDefaultValue(values, objkey, item.type, item.selections)
            "
          >
            <el-select v-model="values[objkey]" size="mini" placeholder="请选择" style="width:100%">
              <el-option
                :label="selectionItem.name"
                v-for="(selectionItem, selectionIndex) in item.selections"
                :key="path + '.' + objkey + '.' + selectionIndex"
                :value="selectionItem.value"
              >
              </el-option>
            </el-select>

          </template>

          <template
            v-if="
              item.type == 'checkbox' &&
                setDefaultValue(values, objkey, item.type, item.selections)
            "
          >
            <el-checkbox-group v-model="values[objkey]">
              <el-checkbox
                v-for="(checkboxItem, checkboxIndex) in item.selections"
                :key="path + '.' + objkey + '.' + checkboxIndex"
                :label="checkboxItem.value"
                >{{ checkboxItem.name }}</el-checkbox
              >
            </el-checkbox-group>
          </template>

          <template
            v-if="
              item.type == 'object' &&
                setDefaultValue(values, objkey, item.type)
            "
          >
            <settingPanel
              :path="path + '.' + objkey"
              :objkey="objkey.toString()"
              :options="item.options"
              :values="values[objkey]"
            ></settingPanel>
          </template>

          <template v-if="item.type == 'array'">
            <el-button
              type="primary"
              size="mini"
              @click="addListItem(values, objkey)"
              >add[{{ path + "." + objkey }}]Item</el-button
            >
            <br />
            <br />
            <el-collapse>
              <el-collapse-item
                :name="valueIndex"
                v-for="(valueItem, valueIndex) in values[objkey]"
                :key="path + '.' + objkey + '.' + valueIndex"
              >
                <template slot="title">
                  <el-button
                    type="text"
                    size="mini"
                    @click="removeListItem(values[objkey], valueIndex)"
                    >remove：</el-button
                  >
                  &nbsp; &nbsp; &nbsp;
                  {{ path + "." + objkey + "." + valueIndex }}
                </template>

                <settingPanel
                  :path="path + '.' + objkey"
                  :objkey="path + '.' + objkey + '.' + valueIndex"
                  :options="item.options"
                  :values="valueItem"
                >
                </settingPanel>
              </el-collapse-item>
            </el-collapse>
          </template>
          <span v-if="item.description" style="font-size:12px;color:#999999">
            {{ item.description }}
          </span>
        </el-form-item>
      </div>
    </el-form>
    <br />
    <slot name="default"></slot>
  </div>
</template>

<script>
import resourceApi from "@/api/resource";

import javascriptEditor from "@/components/javascriptEditor";

export default {
  name: "settingPanel",
  components: { javascriptEditor },
  filters: {
    getResourceUrl(fileId) {
      debugger;
      return resourceApi.getResourceUrl(fileId);
    }
  },
  props: {
    path: {
      type: String,
      default: ""
    },
    objkey: {
      type: String,
      default: ""
    },
    options: {
      default: function() {
        return {};
      }
    },
    values: {
      default: function() {
        return {};
      }
    }
  },
  data() {
    return {};
  },
  created() {
    this.listLoading = false;
  },
  mounted() {},
  methods: {
    setDefaultValue(value, key, valueType, selections) {
      switch (valueType) {
        case "checkbox":
          if (!value[key]) {
            this.$set(value, key, []);

            if (selections && selections.length > 0)
              value[key].push(selections[0].value);
          }
          break;

        case "ddl":
        case "radio":
          if (value[key] == null || typeof value[key] == "undefined") {
            this.$set(value, key, "");
            if (value[key] == "" && selections && selections.length > 0)
              value[key] = selections[0].value;
          }
          break;
        case "object":
          if (!value[key]) {
            this.$set(value, key, {});
          }
          break;
        case "string":
        case "text":
          if (!value[key]) {
            this.$set(value, key, "");
          }
          break;
        case "number":
          if (!value[key]) {
            this.$set(value, key, null);
          }
          break;
        default:
          // if (!value[key]) this.$set(value, key, "");
          break;
      }
      return true;
    },

    getOptions(optionsMetadata) {
      var options = {};
      for (var key in optionsMetadata) {
        var option = optionsMetadata[key];
        if (option.type == "Object") {
          options[key] = this.getOptions(option.options);
        } else if (option.type == "Array") {
          var values = [];
          option.optionArr.forEach(ops => {
            values.push(this.getOptions(ops));
          });

          options[key] = values;
        } else {
          options[key] = option.value;
        }
      }
      return options;
    },
    addListItem(value, key) {
      if (!value[key]) this.$set(value, key, []);
      value[key].push({});
    },
    removeListItem(values, index) {
      values.splice(index, 1);
    }
  }
};
</script>
<style>
.app-container {
  padding: 3px 3px 3px 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.CodeMirror {
  height: 600px;
}
</style>
